<template>
  <div>
    <my-header></my-header>
    <main id="main" class="container">
      <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100" src="img/index/banner1.png" alt="First slide" />
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="img/index/banner2.png" alt="Second slide" />
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="img/index/banner3.png" alt="Third slide" />
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="img/index/banner4.png" alt="4th slide" />
          </div>
        </div>
        <a
          class="carousel-control-prev"
          href="#carouselExampleIndicators"
          role="button"
          data-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a
          class="carousel-control-next"
          href="#carouselExampleIndicators"
          role="button"
          data-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
      <div>
        <!-- 如果已经获取到商品的数据，就渲染以下元素 -->
        <h3 class="pb-3" v-if="p1 && p2 && p3">
          <nav class="navbar navbar-light border-bottom border-secondary pb-0 mb-2">
            <a class="navbar-brand" href="#">
              <img src="img/index/computer_icon.png" class="d-inline-block align-top" alt />
              首页推荐 / 1F
            </a>
          </nav>
          <div class="row mb-2">
            <div id="p1" class="col-md-7">
              <div class="card border-0 flex-md-row box-shadow h-md-250">
                <div class="card-body d-flex flex-column align-items-start">
                  <h5 class="d-inline-block mb-2" v-text="p1.title"></h5>
                  <h6 class="mb-5">
                    <a class="text-dark" href="javascript:;" v-text="p1.details"></a>
                  </h6>
                  <span class="text-primary">{{p1.price | PF}}</span>
                  <router-link
                    class="btn btn-primary"
                    :to="`/details/${p1.href.split('=')[1]}`"
                  >查看详情</router-link>
                </div>
                <img
                  class="card-img-right flex-auto d-none d-md-block"
                  data-src="holder.js/200x250?theme=thumb"
                  alt="Thumbnail [200x250]"
                  :src="p1.pic"
                  data-holder-rendered="true"
                />
              </div>
            </div>
            <div class="col-md-5 pl-0">
              <div class="card border-0 flex-md-row box-shadow h-md-250">
                <div class="card-body d-flex flex-column align-items-start">
                  <h5 class="d-inline-block mb-2">{{p2.title}}</h5>
                  <h6 class="mb-5">
                    <a class="text-dark" href="javascript:;">{{p2.details}}</a>
                  </h6>
                  <span class="text-primary">{{p2.price | PF}}</span>
                  <router-link
                    class="btn btn-primary"
                    :to="`/details/${p2.href.split('=')[1]}`"
                  >查看详情</router-link>
                </div>
                <img
                  class="card-img-right flex-auto d-none d-md-block mt-5"
                  data-src="holder.js/200x250?theme=thumb"
                  alt="Thumbnail [200x250]"
                  :src="p2.pic"
                  data-holder-rendered="true"
                />
              </div>
            </div>
          </div>
          <div class="row mb-2">
            <div class="col-md-5">
              <div class="card border-0 flex-md-row box-shadow h-md-250">
                <div class="card-body d-flex flex-column align-items-start">
                  <h5 class="d-inline-block mb-3">{{p3.title}}</h5>
                  <span class="text-primary">{{p3.price | PF}}</span>
                  <router-link
                    class="btn btn-primary"
                    :to="`/details/${p3.href.split('=')[1]}`"
                  >查看详情</router-link>
                </div>
                <img
                  class="card-img-right flex-auto d-none d-md-block mt-5"
                  data-src="holder.js/200x250?theme=thumb"
                  alt="Thumbnail [200x250]"
                  :src="p3.pic"
                  data-holder-rendered="true"
                />
              </div>
            </div>
            <div class="col-md-7 pl-0">
              <div id="others" class="row pr-3">
                <div class="col-md-4 p-0 pl-2" v-for="(item, index) of others" :key="index">
                  <div class="card border-0 text-center">
                    <img class="card-img-top" :src="item.pic" alt="Card image cap" />
                    <div class="card-body p-0 pr-1 pl-1">
                      <span class="d-inline-block">{{item.title}}</span>
                      <span class="text-primary small">{{item.price | PF}}</span>
                      <router-link
                        class="btn btn-sm btn-primary"
                        :to="`/details/${item.href.split('=')[1]}`"
                      >查看详情</router-link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </h3>
        <!-- 否则显示加载中，下面的2楼和3楼商品信息也是一样 -->
        <h3 v-else>加载中...</h3>
        <h3 class="pb-3">
          <nav class="navbar navbar-light border-bottom border-secondary pb-0 mb-2">
            <a class="navbar-brand" href="#">
              <img src="img/index/computer_icon.png" class="d-inline-block align-top" alt />
              最新上架 / 2F
            </a>
          </nav>
          <div class="row mb-2">
            <div class="col-md-7">
              <div class="card border-0 flex-md-row box-shadow h-md-250">
                <div class="card-body d-flex flex-column align-items-start">
                  <h5 class="d-inline-block mb-2">Apple MacBook Air系列</h5>
                  <h6 class="mb-5">
                    <a
                      class="text-dark"
                      href="javascript:;"
                    >酷睿双核i5处理器|256GB SSD|8GB内存|英特尔HD显卡620含共享显卡内存</a>
                  </h6>
                  <span class="text-primary">¥6988.00</span>
                  <a class="btn btn-primary" href="product_details.html?lid=1">查看详情</a>
                </div>
                <img
                  class="card-img-right flex-auto d-none d-md-block"
                  data-src="holder.js/200x250?theme=thumb"
                  alt="Thumbnail [200x250]"
                  src="img/index/study_computer_img1.png"
                  data-holder-rendered="true"
                />
              </div>
            </div>
            <div class="col-md-5">
              <div class="card border-0 flex-md-row box-shadow h-md-250">
                <div class="card-body d-flex flex-column align-items-start">
                  <h5 class="d-inline-block mb-2">小米Air 金属超轻薄</h5>
                  <h6 class="mb-5">
                    <a class="text-dark" href="javascript:;">酷睿双核i5处理器|512GB SSD|2GB内存|英特尔HD独立显卡</a>
                  </h6>
                  <span class="text-primary">¥3488.00</span>
                  <a class="btn btn-primary" href="product_details.html?lid=5">查看详情</a>
                </div>
                <img
                  class="card-img-right flex-auto d-none d-md-block mt-5"
                  data-src="holder.js/200x250?theme=thumb"
                  alt="Thumbnail [200x250]"
                  src="img/index/study_computer_img2.png"
                  data-holder-rendered="true"
                />
              </div>
            </div>
          </div>
          <div class="row mb-2">
            <div class="col-md-5">
              <div class="card border-0 flex-md-row box-shadow h-md-250">
                <div class="card-body d-flex flex-column align-items-start">
                  <h5 class="d-inline-block mb-3">联想E480C 轻薄系列</h5>
                  <span class="text-primary">¥5399.00</span>
                  <a class="btn btn-primary" href="product_details.html?lid=9">查看详情</a>
                </div>
                <img
                  class="card-img-right flex-auto d-none d-md-block mt-5"
                  data-src="holder.js/200x250?theme=thumb"
                  alt="Thumbnail [200x250]"
                  src="img/index/study_computer_img3.png"
                  data-holder-rendered="true"
                />
              </div>
            </div>
            <div class="col-md-7">
              <div class="row pr-3">
                <div class="col-md-4 p-0 pl-2">
                  <div class="card border-0 text-center">
                    <img
                      class="card-img-top"
                      src="img/index/study_computer_img4.png"
                      alt="Card image cap"
                    />
                    <div class="card-body p-0 pr-1 pl-1">
                      <span class="d-inline-block">华硕RX310 金属超极本</span>
                      <span class="text-primary small">¥4966.00</span>
                      <a class="btn btn-sm btn-primary" href="product_details.html?lid=13">查看详情</a>
                    </div>
                  </div>
                </div>
                <div class="col-md-4 p-0 pl-2">
                  <div class="card border-0 text-center">
                    <img
                      class="card-img-top"
                      src="img/index/study_computer_img5.png"
                      alt="Card image cap"
                    />
                    <div class="card-body p-0 pr-1 pl-1">
                      <span class="d-inline-block">联想小新700 电竞版游戏本</span>
                      <span class="text-primary small">¥6299.00</span>
                      <a class="btn btn-sm btn-primary" href="product_details.html?lid=17">查看详情</a>
                    </div>
                  </div>
                </div>
                <div class="col-md-4 p-0 pl-2">
                  <div class="card border-0 text-center">
                    <img
                      class="card-img-top"
                      src="img/index/study_computer_img3.png"
                      alt="Card image cap"
                    />
                    <div class="card-body p-0 pr-1 pl-1">
                      <span class="d-inline-block">戴尔灵越燃7000 轻薄窄边</span>
                      <span class="text-primary small">¥5199.00</span>
                      <a class="btn btn-sm btn-primary" href="product_details.html?lid=19">查看详情</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </h3>
        <h3 class="pb-3">
          <nav class="navbar navbar-light border-bottom border-secondary pb-0 mb-2">
            <a class="navbar-brand" href="#">
              <img src="img/index/computer_icon.png" class="d-inline-block align-top" alt />
              热销单品 / 3F
            </a>
          </nav>
          <div class="row mb-2">
            <div class="col-md-7">
              <div class="card border-0 flex-md-row box-shadow h-md-250">
                <div class="card-body d-flex flex-column align-items-start">
                  <h5 class="d-inline-block mb-2">Apple MacBook Air系列</h5>
                  <h6 class="mb-5">
                    <a
                      class="text-dark"
                      href="javascript:;"
                    >酷睿双核i5处理器|256GB SSD|8GB内存|英特尔HD显卡620含共享显卡内存</a>
                  </h6>
                  <span class="text-primary">¥6988.00</span>
                  <a class="btn btn-primary" href="product_details.html?lid=1">查看详情</a>
                </div>
                <img
                  class="card-img-right flex-auto d-none d-md-block"
                  data-src="holder.js/200x250?theme=thumb"
                  alt="Thumbnail [200x250]"
                  src="img/index/study_computer_img1.png"
                  data-holder-rendered="true"
                />
              </div>
            </div>
            <div class="col-md-5">
              <div class="card border-0 flex-md-row box-shadow h-md-250">
                <div class="card-body d-flex flex-column align-items-start">
                  <h5 class="d-inline-block mb-2">小米Air 金属超轻薄</h5>
                  <h6 class="mb-5">
                    <a class="text-dark" href="javascript:;">酷睿双核i5处理器|512GB SSD|2GB内存|英特尔HD独立显卡</a>
                  </h6>
                  <span class="text-primary">¥3488.00</span>
                  <a class="btn btn-primary" href="product_details.html?lid=5">查看详情</a>
                </div>
                <img
                  class="card-img-right flex-auto d-none d-md-block mt-5"
                  data-src="holder.js/200x250?theme=thumb"
                  alt="Thumbnail [200x250]"
                  src="img/index/study_computer_img2.png"
                  data-holder-rendered="true"
                />
              </div>
            </div>
          </div>
          <div class="row mb-2">
            <div class="col-md-5">
              <div class="card border-0 flex-md-row box-shadow h-md-250">
                <div class="card-body d-flex flex-column align-items-start">
                  <h5 class="d-inline-block mb-3">联想E480C 轻薄系列</h5>
                  <span class="text-primary">¥5399.00</span>
                  <a class="btn btn-primary" href="product_details.html?lid=9">查看详情</a>
                </div>
                <img
                  class="card-img-right flex-auto d-none d-md-block mt-5"
                  data-src="holder.js/200x250?theme=thumb"
                  alt="Thumbnail [200x250]"
                  src="img/index/study_computer_img3.png"
                  data-holder-rendered="true"
                />
              </div>
            </div>
            <div class="col-md-7">
              <div class="row pr-3">
                <div class="col-md-4 p-0 pl-2">
                  <div class="card border-0 text-center">
                    <img
                      class="card-img-top"
                      src="img/index/study_computer_img4.png"
                      alt="Card image cap"
                    />
                    <div class="card-body p-0 pr-1 pl-1">
                      <span class="d-inline-block">华硕RX310 金属超极本</span>
                      <span class="text-primary small">¥4966.00</span>
                      <a class="btn btn-sm btn-primary" href="product_details.html?lid=13">查看详情</a>
                    </div>
                  </div>
                </div>
                <div class="col-md-4 p-0 pl-2">
                  <div class="card border-0 text-center">
                    <img
                      class="card-img-top"
                      src="img/index/study_computer_img5.png"
                      alt="Card image cap"
                    />
                    <div class="card-body p-0 pr-1 pl-1">
                      <span class="d-inline-block">联想小新700 电竞版游戏本</span>
                      <span class="text-primary small">¥6299.00</span>
                      <a class="btn btn-sm btn-primary" href="product_details.html?lid=17">查看详情</a>
                    </div>
                  </div>
                </div>
                <div class="col-md-4 p-0 pl-2">
                  <div class="card border-0 text-center">
                    <img
                      class="card-img-top"
                      src="img/index/study_computer_img3.png"
                      alt="Card image cap"
                    />
                    <div class="card-body p-0 pr-1 pl-1">
                      <span class="d-inline-block">戴尔灵越燃7000 轻薄窄边</span>
                      <span class="text-primary small">¥5199.00</span>
                      <a class="btn btn-sm btn-primary" href="product_details.html?lid=19">查看详情</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </h3>
      </div>
      <ul class="nav nav-pills nav-fill mb-3">
        <li class="nav-item">
          <a class="nav-link" href="#">
            <img src="img/footer/icon1.png" />
            <h6 class="text-muted">品质保障</h6>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <img src="img/footer/icon2.png" />
            <h6 class="text-muted">私人订制</h6>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <img src="img/footer/icon3.png" />
            <h6 class="text-muted">学员特供</h6>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <img src="img/footer/icon4.png" />
            <h6 class="text-muted">专属特权</h6>
          </a>
        </li>
      </ul>
      <div class="btn-group-vertical position-fixed" role="group" aria-label="Basic example">
        <button
          type="button"
          class="btn btn-secondary btn-sm border-light border-left-0 border-right-0"
        >
          首页
          <br />推荐
        </button>
        <button
          type="button"
          class="btn btn-secondary btn-sm border-light border-left-0 border-right-0"
        >
          最新
          <br />上架
        </button>
        <button
          type="button"
          class="btn btn-secondary btn-sm border-light border-left-0 border-right-0"
        >
          热销
          <br />单品
        </button>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      p1: null,
      p2: null,
      p3: null,
      others: [],
      plist: []
    };
  },

  async created() {
    const { data } = await this.axios.get("/index");
    this.p1 = data[0];
    this.p2 = data[1];
    this.p3 = data[2];
    let others = data.filter((item, index) => index > 2);
    this.others = others;
    this.plist = data;
  }
};
</script>

<style lang="scss" scoped>
</style>